const data = () => {
    return {
        isCollapse: false,
    }
}

const methods = {
    handleOpen: (key, keyPath) => {
        console.log(key, keyPath)
    },
    handleClose: (key, keyPath) => {
        console.log(key, keyPath)
    },
    gotoView: (path) => {
        console.log(path)
        router.push(path)
    }
}

const template = `
<div class="app-navbar" style="display: flex;">
    <el-icon class="app-navbar-icon"><Eleme /></el-icon>
    <a class="app-navbar-brand">Codegen App</a>
</div>

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :label="false">expand</el-radio-button>
    <el-radio-button :label="true">collapse</el-radio-button>
</el-radio-group>

<el-menu default-active="2" class="el-menu-vertical-demo dark-mode" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
    <el-sub-menu index="1">
        <template #title>
            <el-icon><location /></el-icon>
            <span>代码生成</span>
        </template>
        <el-menu-item index="1-1" @click="gotoView('/codegen')">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
        <template #title>Navigator Three</template>
        <el-icon><document /></el-icon>
    </el-menu-item>
    <el-menu-item index="3">
        <template #title>Navigator Four</template>
        <el-icon><setting /></el-icon>
    </el-menu-item>
</el-menu>

<p class="app-nav">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 \`to\` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 \`<a>\` 标签 -->
    <router-link to="/">Home</router-link>
    <router-link to="/codegen">Codegen</router-link>
    <router-link to="/about">About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
`

export default {data, methods, template}
